<!-- 个人设置页 -->
<template>
    <!-- 单根 -->
    <div>
        <el-form label-width="auto">
            <el-form-item label="用户名">
                <el-text>{{ loginStore.username }}</el-text>
            </el-form-item>
            <el-form-item label="昵称">
                <el-text>{{ loginStore.nickname }}</el-text>
            </el-form-item>
            <el-form-item label="当前角色">
                <div style="width: 100%; text-align: left;">
                    <el-tag v-for="roleName in loginStore.roles">
                        {{ roleName }}
                    </el-tag>
                </div>
                <div>
                    <el-button plain @click="selectRole">切换角色</el-button>
                </div>
            </el-form-item>
            <el-form-item label="密码">
                <el-button @click="editPassword">修改密码</el-button>
            </el-form-item>
        </el-form>
        <!-- 修改密码 -->
        <el-dialog v-model="editPasswordDialogVisible" title="修改密码" width="400px" draggable>
            <el-form :model="editPasswordForm" label-width="auto" ref="editPasswordFormRef"
                     :rules="editPasswordFormRules">
                <el-form-item label="旧密码" prop="old">
                    <el-input v-model="editPasswordForm.old" type="password" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="新密码" prop="new">
                    <el-input v-model="editPasswordForm.new" type="password" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="重复新密码" prop="newRepeat">
                    <el-input v-model="editPasswordForm.newRepeat" type="password" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="editPasswordDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="editPasswordFormSubmit" :loading="editPasswordFormSubmitLoading">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 多角色选择 -->
        <el-dialog title="请选择一个角色" v-model="selectRoleDialogVisible">
            <el-radio-group v-model="selectRoleRadio">
                <el-radio v-for="(item, index) in loginStore.availableRoles" :label="index" size="large" border>
                    {{ item }}
                </el-radio>
            </el-radio-group>
            <template #footer>
                <el-button type="primary" @click="selectRoleSubmit">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import {ref, } from 'vue'
import {useLoginStore} from '../assets/ts/login';
import {FormRules, FormInstance, ElMessage} from 'element-plus'
import {myAxios} from '../assets/ts/my-axios'
import {vueRouter, vueRouteDefine} from '../assets/ts/my-vue-router';

const loginStore = useLoginStore()

// ===================================== 修改密码 ==========================================

const editPasswordDialogVisible = ref(false)
const editPasswordForm = ref({old: '', new: '', newRepeat: ''})
const editPasswordFormRef = ref<FormInstance>()
const editPasswordFormSubmitLoading = ref(false)

// 修改密码 打开对话框
function editPassword() {
    editPasswordFormRef.value?.clearValidate()
    editPasswordForm.value = {old: '', new: '', newRepeat: ''}
    editPasswordDialogVisible.value = true
}

// 修改密码 - 表单验证规则
const editPasswordFormRules = ref<FormRules>({
    old: [
        {required: true, message: "请输入旧密码", trigger: "blur"},
        {min: 6, max: 16, message: "长度限制为6到16个字符", trigger: "blur"},
    ],
    new: [
        {required: true, message: "请输入新密码", trigger: "blur"},
        {min: 6, max: 16, message: "长度限制为6到16个字符", trigger: "blur"},
    ],
    newRepeat: [
        {required: true, message: "请重新输入新密码", trigger: "blur"},
        {min: 6, max: 16, message: "长度限制为6到16个字符", trigger: "blur"},
        {validator: checkPasswordNewPeapted, trigger: "blur"},
    ],
})

// 修改密码 - 表单验证规则 - 检查重复密码
function checkPasswordNewPeapted(_rule: any, value: any, callback: any) {
    if (value != editPasswordForm.value.new) {
        callback(new Error('重复密码错误'))
    }
    callback()
}

// 修改密码提交
function editPasswordFormSubmit() {
    // TODO 开启验证
    editPasswordFormRef.value?.validate((valid, _fields) => {
        if (valid) {
            editPasswordFormSubmitLoading.value = true
            myAxios.post('/setting/password', {
                    oldPassword: editPasswordForm.value.old,
                    newPassword: editPasswordForm.value.new
                },
                {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                .then((response: any) => {
                    if (response.data.code == 0) {
                        ElMessage.success("修改成功，请重新登录")
                        vueRouter.replace(vueRouteDefine.login)
                    } else {
                        ElMessage.error(response.data.message)
                    }
                }).finally(() => {
                editPasswordFormSubmitLoading.value = false
            })
        }
    })
}

// =================================== 选择角色 ======================================

const selectRoleDialogVisible = ref(false)
const selectRoleRadio = ref('')

// 选择角色 - 打开面板
function selectRole() {
    selectRoleRadio.value = ''
    selectRoleDialogVisible.value = true
}

// 选择角色 - 提交
function selectRoleSubmit() {
    myAxios.post('/login/select-role', {roleCode: selectRoleRadio.value}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
        .then((response: any) => {
            if (response.data.code == 0) {
                loginStore.set(response.data.data)
            } else {
                ElMessage.error(response.data.message)
            }
        }).finally(() => {
        selectRoleDialogVisible.value = false
    })
}

</script>

<style scoped>

.el-tag{
    margin: 5px;
}

</style>